<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lx9</title>
</head>

<body onload="showRole()">
    <div id="canvasDiv" style="width:100%; height:652px; display:flex; justify-content:center;">
        <canvas id="myCanvas" width="1000" height="650" style="border: black 1px solid; margin-top:2px;">
            你的浏览器不支持canvas，请更换其他浏览器试一试。
        </canvas>
        <img src="../img/icon03.png" id="genguin" style="display: none;">
    </div>
    <div style="text-align: center;margin: 20px auto;">
        <button id="btn_circle" style="margin:0 10px;">圆周运动</button>
        <button id="btn_elliptical" style="margin:0 10px;">椭圆运动</button>
        <button id="btn_pingpao" style="margin:0 10px;">平抛运动</button>
    </div>
    <script>
        // 获取组件
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var image = document.getElementById("genguin");
        var btn_circle = document.getElementById("btn_circle");
        var btn_elliptical = document.getElementById("btn_elliptical");
        var btn_pingpao = document.getElementById("btn_pingpao");
        var h = document.getElementsByTagName("h3");
        console.log(h);

        // 定时器
        var timer;

        /*----------------需要用到的参数----------*/
        //centerX, centerY 的作用是让图片绕画布中心旋转
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;

        // 旋转的角度
        var angle = 0;
        // 定义半径
        var radius = 200;
        // 每帧旋转角度的增加值
        var speed = 0.05;

        // 椭圆的的x，y方向上的半径
        var radiusX = 200;
        var radiusY = 100;

        //水平初速度
        var v0 = 20;
        // 时间
        var t = 0;
        // 加速度
        var g = 2;
        //x,y的坐标
        var x = 0;
        var y = 0;

        var x1 = 0;
        var y1 = 0;


        /* ---------监听器区---------------*/
        //调用圆周运动方法
        btn_circle.addEventListener('click', function() {
            if (!null) {
                clearInterval(timer);
            }
            timer = setInterval(function() {
                drawCircle();
            }, 30);
        });

        // 调用椭圆运动方法
        btn_elliptical.addEventListener('click', function() {
            if (!null) {
                clearInterval(timer);
            }
            timer = setInterval(function() {
                drawElliptical();
            }, 30);
        });

        // 调用平抛运动方法
        btn_pingpao.addEventListener('click', function() {
            x1 = 0
            y1 = 0
            t = 0;
            if (!null) {
                clearInterval(timer);
            }
            ctx.beginPath();
            timer = setInterval(function() {
                drawPingPao();
            }, 10);
            ctx.closePath();
        });


        /* ----------------方法区-----------------*/
        //显示初始化图片
        function showRole() {
            ctx.drawImage(image, 2, 5);
        }


        // 圆周运动
        function drawCircle() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.stroke();
            // 顺时针
            x = centerX - 16 + Math.cos(angle) * radius;
            y = centerY - 16 + Math.sin(angle) * radius;
            ctx.drawImage(image, x, y);
            //角度增加
            angle += speed;
        }

        // 椭圆运动
        function drawElliptical() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI, true);
            ctx.closePath();
            ctx.stroke();
            x = centerX - 16 + Math.cos(angle) * radiusX;
            y = centerY - 16 + Math.sin(angle) * radiusY;
            ctx.drawImage(image, x, y);
            //角度增加
            angle += speed;
        }

        // 平抛运动
        function drawPingPao() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // x方向的位移
            x = v0 * t;
            // y方向的位移
            y = 0.5 * g * Math.pow(t, 2);
            ctx.arcTo(x1, y1, x, y, 30);
            ctx.stroke();
            x1 = x;
            y1 = y;
            t = t + 0.1;
            ctx.drawImage(image, x - 16, y - 16);
        }
    </script>
</body>

</html>